<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工列表</title>

    <%
        //存入当前页面路径，便于取资源
        pageContext.setAttribute("APP_Path", request.getContextPath());
    %>

    <script src="${APP_Path}/static/js/jquery-1.12.4.min.js"></script>
    <script src="${APP_Path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${APP_Path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 修改员工模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email_update_input"
                                   placeholder="xxx@xxx.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="2"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-4">
                            <!--部门提交id即可-->
                            <select name="dId" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">确认修改</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加员工模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input"
                                   placeholder="请输入员工姓名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email_add_input"
                                   placeholder="xxx@xxx.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="2"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-4">
                            <!--部门提交id即可-->
                            <select name="dId" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">确认添加</button>
            </div>
        </div>
    </div>
</div>

<!--搭建显示页面 row列，col行-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <!--一行12格，自己占4格，再偏移8格，就是在最右边显示-->
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button type="button" class="btn btn-danger" id="emp_delete_all_btn">批量删除</button>
        </div>
    </div>
    <!--数据表格显示-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>

            </table>
        </div>
    </div>

    <!--显示分页信息-->
    <div class="row">
        <!--分页文字信息-->
        <div class="col-md-6" id="page_info_area"></div>
        <!--分页条-->
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
</div>

<script type="text/javascript">

    //把总记录数和当前页提取出来，用于增加数据之后返回最后一页查看新增的数据
    //和修改之后查看当前修改的数据
    var total;
    var pageNum;

    $(function () {
        to_page(1);
    });

    //表格加载完成之后发出请求，拿到页面数据
    function to_page(page) {
        $.ajax({
            url: "${APP_Path}/emp/findAll",
            data: "page=" + page,
            type: "get",
            success: function (data) {
                //console.log(data)
                //1、解析并显示员工数据
                build_emps_table(data);
                //2、解析并显示分页信息
                build_page_info(data);
                //3、解析并显示分页条
                build_page_nav(data);
            }
        })
    }

    //加载表格数据
    function build_emps_table(data) {
        //在加载元素之前需要清空，否则数据一直叠加
        $("#emps_table tbody").empty();

        var emps = data.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            //alert(item.empName)
            var checkBoxId = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender === 1 ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            //第一种写法
            /*var btnTd = $("<td></td>").append("<button type=\"button\" class=\"btn btn-primary btn-sm\">" +
                "<span class=\"glyphicon glyphicon-pencil\"\n" +
                "aria-hidden=\"true\"></span>新增</button>").append("<button type=\"button\" class=\"btn btn-danger btn-sm\">" +
                "<span class=\"glyphicon glyphicon-trash\"\n" +
                "aria-hidden=\"true\"></span>删除</button>");*/
            //append执行完了之后还是返回原来的元素
            //第二种写法         绑定一个class元素，用于删除和修改操作
            var editTd = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>")
                .addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个属性表示员工id
            editTd.attr("edit-id", item.empId);
            var delTd = $("<button></button>").addClass("btn btn-danger btn-sm del_btn").append($("<span></span>")
                .addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个属性表示员工id
            delTd.attr("del-id", item.empId);
            var btnTd = $("<td></td>").append(editTd).append(" ").append(delTd);
            $("<tr></tr>").append(checkBoxId).append(empIdTd).append(empNameTd)
                .append(genderTd).append(emailTd).append(deptNameTd).append(btnTd)
                .appendTo("#emps_table tbody");
        })
    }

    //显示分页信息
    function build_page_info(data) {
        //在加载元素之前需要清空，否则数据一直叠加
        $("#page_info_area").empty();

        $("#page_info_area").append("当前是第" + data.extend.pageInfo.pageNum + "页，共"
            + data.extend.pageInfo.pages
            + "页，" + data.extend.pageInfo.total + "条记录数。");
        //把总记录数和当前页提取出来，用于增加数据之后返回最后一页查看新增的数据
        //和修改之后查看当前修改的数据
        total = data.extend.pageInfo.total;
        pageNum = data.extend.pageInfo.pageNum;
    }

    //显示分页条
    function build_page_nav(data) {
        //在加载元素之前需要清空，否则数据一直叠加
        $("#page_nav_area").empty();

        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
        if (data.extend.pageInfo.hasPreviousPage === false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            firstPageLi.click(function () {
                to_page(1)
            });
            prePageLi.click(function () {
                to_page(data.extend.pageInfo.pageNum - 1)
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (data.extend.pageInfo.hasNextPage === false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //为元素增加点击事件
            nextPageLi.click(function () {
                to_page(data.extend.pageInfo.pageNum + 1)
            });
            lastPageLi.click(function () {
                to_page(data.extend.pageInfo.pages)
            });
        }

        //添加首页和前一页的提示
        ul.append(firstPageLi).append(prePageLi);
        $.each(data.extend.pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));

            if (data.extend.pageInfo.pageNum === item) {
                numLi.addClass("active");
            }

            numLi.click(function () {
                to_page(item)
            });

            //遍历添加页码
            ul.append(numLi);
        });
        //添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //表单完整重置
    function reset_form(ele) {
        $(ele)[0].reset();
        //清空表单下的所有has-error has-success属性
        $(ele).find("*").removeClass("has-error has-success");
        //清空span的值
        $(ele).find(".help-block").text("");
    }

    //点击添加按钮，弹出模态框
    $("#emp_add_modal_btn").click(function () {
        //这里不能清空，因为还有其他数据，应该使用表单重置
        //$("#empAddModal form").empty();
        //这只是清空表单数据，这里我们应该把样式和数据一块清理掉$("#empAddModal form")[0].reset();
        reset_form("#empAddModal form");
        //发送Ajax请求获取下拉框部门信息
        getDepts("#empAddModal select");
        //弹出模态框
        $("#empAddModal").modal({
            backdrop: "static"
        });
    });

    //查询所有部门信息
    function getDepts(ele) {
        //清空下拉列表的值
        $(ele).empty();
        $.ajax({
            url: "${APP_Path}/dept/findAll",
            type: "get",
            success: function (data) {
                //console.log(data)
                //不传参的写法
                $.each(data.extend.depts, function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                    optionEle.appendTo(ele);
                })
            }
        })
    }

    //验证表单数据
    function validate_add_form() {
        //拿到要校验的数据使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{6,12}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
        if (!regName.test(empName)) {
            //alert("请输入2-5个中文或6-12为英文和数据组合！");
            //美化警告提示框
            /*$("#empName_add_input").parent().addClass("has-error");
            $("#empName_add_input").next("span").text("请输入2-5个中文或6-12为英文和数据组合！");*/
            show_validate_msg("#empName_add_input", "error", "请输入2-5个中文或6-12为英文和数字组合！");
            return false;
        } else {
            /*$("#empName_add_input").parent().addClass("has-success");
            $("#empName_add_input").next("span").text("");*/
            show_validate_msg("#empName_add_input", "success", "");
        }

        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\\.-]+)@([\da-z\\.-]+)\.([a-z\\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("请输入正确的邮箱格式！");
            /*$("#email_add_input").parent().addClass("has-error");
            $("#email_add_input").next("span").text("请输入正确的邮箱格式！");*/
            show_validate_msg("#email_add_input", "error", "请输入正确的邮箱格式！");
            return false;
        } else {
            /*$("#email_add_input").parent().addClass("has-success");
            $("#email_add_input").next("span").text("");*/
            show_validate_msg("#email_add_input", "success", "");
        }
        return true;
    }

    //把校验方法提取出来
    function show_validate_msg(ele, status, msg) {
        //在加载元素之前需要清空之前的校验格式
        $(ele).parent().removeClass("has-error has-success");
        $(ele).next("span").text(msg);
        if (status === "error") {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        } else {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        }
    }

    //判断用户名是否存在
    $("#empName_add_input").change(function () {
        //发送Ajax到后端请求数据
        $.ajax({
            url: "${APP_Path}/emp/findByName",
            type: "get",
            data: "empName=" + $("#empName_add_input").val(),
            success: function (data) {
                if (data.code === 200) {
                    show_validate_msg("#empName_add_input", "success", data.extend.val_msg);
                    //无论用户名是否存在都给确认添加按钮增加一个属性，点击确认添加按钮前前判断该属性是否正常
                    //若不正常则不发生Ajax请求，避免用户名验证失败邮箱验证通过也能通过验证添加数据的情况
                    $("#emp_save_btn").attr("ajax-val", "success");
                } else {
                    show_validate_msg("#empName_add_input", "error", data.extend.val_msg);
                    $("#emp_save_btn").attr("ajax-val", "error");
                }
            },
            error: function () {
                console.log("失败");
            }
        })
    });

    //确认添加按钮绑定单击事件
    $("#emp_save_btn").click(function () {
        //将数据转换为key，value形式
        /*var result ={};
        $("#empAddModal form").serializeArray().map(function(val,key){
            result[val.name]=val.value;
        });
        console.log(result);*/

        //提取要提交的数据，直接序列化为字符串了例如：empName=tomcat&email=123%40qq.com&gender=2&dId=2
        //alert($("#empAddModal form").serialize());
        //发送Ajax请求，将模态框中的数据提交的服务器进行报保存

        //先验证数据是否符合规定
        if (validate_add_form() === false) {
            return;
        }

        //验证该按钮("#emp_save_btn")属性是否正常
        if ($(this).attr("ajax-val") === "error") {
            return;
        }

        $.ajax({
            url: "${APP_Path}/emp/save",
            type: "post",
            data: $("#empAddModal form").serialize(),
            success: function (data) {
                //alert(data.msg);
                if (data.code === 200) {
                    //添加成功之后关闭模态框来到最后一页，查看新添加的员工
                    $("#empAddModal").modal("hide");
                    to_page(total)
                } else {
                    //console.log(data);
                    if (data.extend.errorsFields.email !== undefined) {
                        show_validate_msg("#email_add_input", "error", data.extend.errorsFields.email);
                    }
                    if (data.extend.errorsFields.empName !== undefined) {
                        show_validate_msg("#empName_add_input", "error", data.extend.errorsFields.empName);
                    }
                }
            },
            error: function () {
                console.log("失败");
            }
        })
    });

    //点击修改按钮，弹出模态框
    $(document).on("click", ".edit_btn", function () {
        //查出员工信息
        getDepts("#empUpdateModal select");
        //查出部门信息
        getEmp($(this).attr("edit-id"));
        //给模态框的确认修改按钮加一个id的值
        $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
        //弹出模态框
        $("#empUpdateModal").modal({
            backdrop: "static"
        });
    });

    //查询所有员工信息
    function getEmp(empId) {
        $.ajax({
            url: "${APP_Path}/emp/findById/" + empId,
            type: "get",
            success: function (data) {
                //console.log(data)
                var empDate = data.extend.emp;
                $("#empName_update_static").text(empDate.empName);
                $("#email_update_input").val(empDate.email);
                //给它传一个数组就会被选中
                $("#empUpdateModal input[name=gender]").val([empDate.gender]);
                $("#empUpdateModal select").val([empDate.dId]);
            }
        })
    }

    //确认修改按钮绑定单击事件
    $("#emp_update_btn").click(function () {
        var email = $("#email_update_input").val();
        var regEmail = /^([a-z0-9_\\.-]+)@([\da-z\\.-]+)\.([a-z\\.]{2,6})$/;
        if (!regEmail.test(email)) {
            show_validate_msg("#email_update_input", "error", "请输入正确的邮箱格式！");
            return false;
        } else {
            show_validate_msg("#email_update_input", "success", "");
        }
        var empDate = $("#empUpdateModal form").serialize();
        $.ajax({
            //第一种方式直接把参数待定url里，不要data
            //url: "${APP_Path}/emp/update/"+$(this).attr("edit-id")+"?"+empDate,
            //第二种方法，配置过滤器，post转为put
            /*url: "${APP_Path}/emp/update/"+$(this).attr("edit-id"),
            type: "post",
            data:empDate+"&_method=PUT",*/
            //第三种方法，配置过滤器，直接发送put请求
            url: "${APP_Path}/emp/update/" + $(this).attr("edit-id"),
            type: "put",
            data: empDate,
            success: function (data) {
                //alert(data.msg);
                if (data.code === 200) {
                    $("#empUpdateModal").modal("hide");
                    to_page(pageNum)
                } else {
                    //console.log(data);
                    if (data.extend.errorsFields.email !== undefined) {
                        show_validate_msg("#email_update_input", "error", data.extend.errorsFields.email);
                    }
                }
            }
        })
    });

    //单个删除按钮绑定单击事件
    $(document).on("click", ".del_btn", function () {
        //弹出是否确认删除对话框      找父标签tr标签下的第三个td
        var empName = $(this).parents("tr").find("td:eq(2)").text();
        if (confirm("确认删除用户名为【" + empName + "】的员工吗？")) {
            //点击确认发送Ajax请求
            $.ajax({
                url: "${APP_Path}/emp/delete/" + $(this).attr("del-id"),
                type: "delete",
                success: function (data) {
                    alert("删除成功！");
                    //回到本页
                    to_page(pageNum)
                }
            })
        }
    });

    //全选全部选
    $("#check_all").click(function () {
        //使用attr获取checked值是undefined
        //attr获取自定义属性的值
        //prop修改或读取dom节点原生的值
        $(this).prop("checked");
        //让当前页每个框的值跟随这个框的值选中或不选中
        $(".check_item").prop("checked", $(this).prop("checked"));
    });

    //给后来添加的元素绑定单击事件
    $(document).on("click", ".check_item", function () {
        //获取选择的个数
        //alert($(".check_item:checked").length)
        //这里判断值不写死，便于维护

        //对这部分做一个优化
        /*if($(".check_item:checked").length === $(".check_item").length){
            $("#check_all").prop("checked", true);
        }else {
            $("#check_all").prop("checked", false);
        }*/

        var flag = $(".check_item:checked").length === $(".check_item").length;
        $("#check_all").prop("checked", flag);
    });

    //点击批量删除
    $("#emp_delete_all_btn").click(function () {
        var empNames = "";
        var ids = "";
        $.each($(".check_item:checked"), function () {
            empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
            ids += $(this).parents("tr").find("td:eq(1)").text() + "-";
        });
        //alert(empNames);
        //去除后面多余的，
        empNames = empNames.substring(0,empNames.length-1);
        ids = ids.substring(0,ids.length-1);
        if (confirm("确认删除用户名为【" + empNames + "】的员工吗？")) {
            //点击确认发送Ajax请求
            $.ajax({
                url: "${APP_Path}/emp/delete/" + ids,
                type: "delete",
                success: function (data) {
                    alert("删除成功！");
                    //回到本页
                    to_page(pageNum)
                }
            })
        }
    })

</script>

</body>
</html>
